<template>
    <el-menu
      :default-active="routePaht"
      class="abc el-menu-vertical-demo"
      @close="handleClose"
      background-color="#324157"
      text-color="#bfcbd9"
      active-text-color="#20a0ff"
      :unique-opened="true"

      router
      :collapse='this.$store.state.homepage.show'
    >
      <el-submenu v-for="(item,index) in newMenu" :key="index" :index="index+''">
        <template slot="title">
          <i :class="item.icon"></i>
          <span>{{item.name}}</span>
        </template>
        <el-menu-item
          :index="subitem.path"
          v-for="(subitem,subindex) in item.subs"
          :key="subindex"
        >{{subitem.name}}</el-menu-item>
      </el-submenu>
    </el-menu>

</template>

<script>
//引入vuex
import { mapState } from "vuex";

export default {
  data() {
    return {
      newMenu: [],
      
      menuConfig: [
        {
          icon: "el-icon-s-tools",
          name: "商品管理",
          subs: [
            { name: "商品列表", path: "/good" },
            { name: "商品分类", path: "/category" },
            { name: "品牌管理", path: "/brand" },
            { name: "商品属性管理", path: "/attribute" }
          ]
        },
        {
          icon: "el-icon-s-management",
          name: "订单中心",
          subs: [{ name: "订单列表", path: "/order" }]
        },
        {
          icon: "el-icon-headset",
          name: "店铺运营",
          subs: [{ name: "专题管理", path: "/topic" }]
        }
      ]
    };
  },
  methods: {
    handleClose() {}
  },
  computed: {
    ...mapState(["login"]),
    routePaht(){
        return this.$route.path
    }
  },
  created() {
    // console.log("vuex中的值", this.login.per);

    const per = this.login.per;

    const newPer = per.reduce((prev, current) => {
      prev[current.path] = true;
      return prev;
    }, {});
    // console.log(newPer);

    const newMenu = [];

    for (var i = 0; i < this.menuConfig.length; i++) {
      const subs = [];
      for (var j = 0; j < this.menuConfig[i].subs.length; j++) {
        if (newPer[this.menuConfig[i].subs[j].path]) {
          subs.push(this.menuConfig[i].subs[j]);
        }
      }
      if (subs.length > 0) {
        newMenu.push({
          ...this.menuConfig[i],
          subs: subs
        });
      }
    }
    this.newMenu = newMenu;
    // console.log("过滤后的", newMenu);
  }
};
</script>

<style lang='less' scoped>
.el-menu-vertical-demo{
    top: 70px;
    height: 100%;
    overflow-y: auto;
    position: absolute;
}

.el-menu-vertical-demo:not(.el-menu--collapse){
    width: 250px;
}
</style>